<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="full-screen" content="yes"/>
<meta name="browsermode" content="application"/>
<meta name="x5-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="x5-page-mode" content="app"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"/>
<link rel="stylesheet" href="./resources/css/bootstrap.min.css"/>
<link rel="stylesheet" href="./resources/css/bootstrap-vue.min.css"/>
<link rel="stylesheet" type="text/css" href="./resources/files/assets/icon/themify-icons/themify-icons.css">
<link rel="stylesheet" type="text/css" href="./resources/files/assets/css/style.css">
</head>
<body>
<div id="app">
	<h1>{{msg}}</h1>
	<com2 :mymsg="msg" @on-changemsg="outSonMsg"></com2>
</div>


<template id="com2">
	<div>
		<input type="text" name="input" v-model="mymsg"  />
		<button type="button" @click="send">发送msg</button>
	</div>
</template>
<script type="text/javascript" src="./resources/files/bower_components/jquery/js/jquery.min.js"></script>
<script src ="./resources/js/vue.min.js"></script>
<script src ="./resources/js/bootstrap-vue.min.js"></script>
<script src ="./resources/js/axios.min.js"></script>
<script src ="./resources/js/vue-axios.min.js"></script>
</body>

<script type="text/javascript">

Vue.component('com2',{
	props:['mymsg'],
	data:function(){
		return {
			//'com2Msg':'hello'
		}
	},
	template:'#com2',
	methods:{
		send(){
			this.$emit('on-changemsg',{msg:this.mymsg});
		}
	}
});

new Vue({
	el:"#app",
	data:{
		"msg":"helloword"
	},
	methods:{
		xxx(){
			this.msg = "xxx";
		},
		outSonMsg(args){
			this.msg = args.msg; 
		}
	}
		
});

</script>

</html>